<template>
    <div class="security-config">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="180px">
            <el-form-item label="密码最小长度" prop="password_min_length">
                <el-input-number v-model="form.password_min_length" :min="6" :max="20" controls-position="right" />
                <span class="config-tip">个字符</span>
            </el-form-item>
            
            <el-form-item label="密码必须包含数字" prop="password_require_digit">
                <el-radio-group v-model="form.password_require_digit">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
            
            <el-form-item label="密码必须包含字母" prop="password_require_letter">
                <el-radio-group v-model="form.password_require_letter">
                    <el-radio :label="1">是</el-radio>
                    <el-radio :label="0">否</el-radio>
                </el-radio-group>
            </el-form-item>
            
            <el-form-item label="登录失败锁定" prop="login_fail_lock">
                <el-radio-group v-model="form.login_fail_lock">
                    <el-radio :label="1">开启</el-radio>
                    <el-radio :label="0">关闭</el-radio>
                </el-radio-group>
            </el-form-item>
            
            <el-form-item label="登录失败次数" prop="login_fail_count" v-if="form.login_fail_lock">
                <el-input-number v-model="form.login_fail_count" :min="3" :max="10" controls-position="right" />
                <span class="config-tip">次后锁定账户</span>
            </el-form-item>
            
            <el-form-item label="锁定时间" prop="login_lock_duration" v-if="form.login_fail_lock">
                <el-input-number v-model="form.login_lock_duration" :min="5" :max="120" controls-position="right" />
                <span class="config-tip">分钟</span>
            </el-form-item>
            
            <el-form-item label="会话超时时间" prop="session_timeout">
                <el-input-number v-model="form.session_timeout" :min="30" :max="480" controls-position="right" />
                <span class="config-tip">分钟</span>
            </el-form-item>
            
            <el-form-item label="内容审核" prop="content_audit">
                <el-radio-group v-model="form.content_audit">
                    <el-radio :label="1">开启</el-radio>
                    <el-radio :label="0">关闭</el-radio>
                </el-radio-group>
                <span class="config-tip">开启后用户发布内容需要审核</span>
            </el-form-item>
            
            <el-form-item label="敏感词过滤" prop="sensitive_word_filter">
                <el-radio-group v-model="form.sensitive_word_filter">
                    <el-radio :label="1">开启</el-radio>
                    <el-radio :label="0">关闭</el-radio>
                </el-radio-group>
            </el-form-item>
            
            <el-form-item label="敏感词列表" prop="sensitive_words" v-if="form.sensitive_word_filter">
                <el-input v-model="form.sensitive_words" type="textarea" :rows="4" 
                    placeholder="请输入敏感词，多个用逗号分隔" style="width: 400px" />
            </el-form-item>
            
            <el-form-item label="IP访问限制" prop="ip_access_limit">
                <el-radio-group v-model="form.ip_access_limit">
                    <el-radio :label="1">开启</el-radio>
                    <el-radio :label="0">关闭</el-radio>
                </el-radio-group>
            </el-form-item>
            
            <el-form-item label="黑名单IP" prop="blacklist_ips" v-if="form.ip_access_limit">
                <el-input v-model="form.blacklist_ips" type="textarea" :rows="3" 
                    placeholder="请输入黑名单IP，多个用逗号分隔" style="width: 400px" />
            </el-form-item>
            
            <el-form-item>
                <el-button type="primary" @click="handleSubmit" :loading="loading">保存配置</el-button>
                <el-button @click="handleReset">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script setup>
import { ref, reactive, watch } from 'vue'
import { ElMessage } from 'element-plus'

const loading = ref(false)
const formRef = ref()

const form = reactive({
    password_min_length: 8,
    password_require_digit: 1,
    password_require_letter: 1,
    login_fail_lock: 1,
    login_fail_count: 5,
    login_lock_duration: 30,
    session_timeout: 120,
    content_audit: 1,
    sensitive_word_filter: 1,
    sensitive_words: '赌博,色情,暴力,诈骗,毒品',
    ip_access_limit: 0,
    blacklist_ips: ''
})

const rules = {
    password_min_length: [
        { required: true, message: '请输入密码最小长度', trigger: 'blur' }
    ],
    login_fail_count: [
        { required: true, message: '请输入登录失败次数', trigger: 'blur' }
    ],
    login_lock_duration: [
        { required: true, message: '请输入锁定时间', trigger: 'blur' }
    ],
    session_timeout: [
        { required: true, message: '请输入会话超时时间', trigger: 'blur' }
    ]
}

// 监听登录失败锁定状态
watch(() => form.login_fail_lock, (newVal) => {
    if (newVal === 0) {
        form.login_fail_count = 5
        form.login_lock_duration = 30
    }
})

// 监听敏感词过滤状态
watch(() => form.sensitive_word_filter, (newVal) => {
    if (newVal === 0) {
        form.sensitive_words = ''
    } else {
        form.sensitive_words = '赌博,色情,暴力,诈骗,毒品'
    }
})

// 监听IP访问限制状态
watch(() => form.ip_access_limit, (newVal) => {
    if (newVal === 0) {
        form.blacklist_ips = ''
    }
})

const handleSubmit = async () => {
    if (!formRef.value) return

    try {
        await formRef.value.validate()
        loading.value = true
        
        // 模拟保存配置
        await new Promise(resolve => setTimeout(resolve, 1000))
        
        ElMessage.success('安全配置保存成功')
    } catch (error) {
        if (error.errors) {
            ElMessage.error('请完善表单信息')
        } else {
            ElMessage.error('保存配置失败')
        }
    } finally {
        loading.value = false
    }
}

const handleReset = () => {
    Object.keys(form).forEach(key => {
        if (key === 'password_min_length') {
            form[key] = 8
        } else if (key === 'login_fail_count') {
            form[key] = 5
        } else if (key === 'login_lock_duration') {
            form[key] = 30
        } else if (key === 'session_timeout') {
            form[key] = 120
        } else if (key === 'sensitive_words') {
            form[key] = '赌博,色情,暴力,诈骗,毒品'
        } else if (typeof form[key] === 'number') {
            form[key] = 1
        } else {
            form[key] = ''
        }
    })
    form.ip_access_limit = 0
}
</script>

<style scoped>
.security-config {
    padding: 20px;
}

.config-tip {
    font-size: 12px;
    color: #909399;
    margin-left: 8px;
}
</style>